15 懒加载

发表于 | 分类于

题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

1
2
3
4
5
6
7
8
9
10
function isVisible($node){
    var scrollTop = $(window).scrollTop() //窗口滚动距离
    var windowHeight = $(window).height() //窗口的高度
    var offsetTop = $node.offset().top //目标元素相对于页面顶部的偏移距离
//两个临界点,最小值是滚动高度,最大值是窗口高度加窗口滚动的距离
    if(offsetTop  < scrollTop + windowHeight && offsetTop > scrollTop){
          return true
    }
    return false
}

题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(window).on('scroll',function(){
    if(isVisible($node){
        console.log(true)
    }
    function isVisible($node){
        var scrollTop = $(window).scrollTop() //窗口滚动距离
        var windowHeight = $(window).height() //窗口的高度
        var offsetTop = $node.offset().top //目标元素相对于页面顶部的偏移距离
//两个临界点,最小值是滚动高度,最大值是窗口高度加窗口滚动的距离
        if(offsetTop  < scrollTop + windowHeight && offsetTop > scrollTop){
          console.log('true')
          return true
    }
    return false
    }
})

题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(window).on('scroll',function(){
     $('.container img').each(function(){
    if( isVisible($(this)) && !isLoaded($(this)) ){   
//遍历每个图片如果出现在可视范围内并且没有被加载过,加载图片并且打印true,否则不做处理
      loadImg($(this))
      console.log("true")
    }
  }) 
})

function isVisible($img){           //检查元素是否出现在窗口可视范围
  var scrollTop = $(window).scrollTop()   //滚动高度
  var windowHeight = $(window).height()   //窗口高度
  var offsetTop = $img.offset().top  //页面顶点至目标的高度
  if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop)  //两个临界点,一个最小值是滚动高度,一个最大值是滚动高度加窗口高度
   {
     return true
 }
 return false
}

function isLoaded($img){            //返回布尔值
  return $img.attr('data-src') === $img.attr('src')
}

function loadImg(#img) {
  $img.attr('src',$img.attr('data-src'))
}

题目4： 图片懒加载的原理是什么？

  • 为什么要懒加载：
    懒加载即延迟，对于图片过多的页面，为了加快页面加载速度，我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。
    这样一来页面加载性能大幅提升，提高了用户体验。
  • 实现原理：
    • 在页面载入时将img标签內的src指向一个小图片，即占位图，将真实地址存放于一个自定义属性data-src中，然后获取页面上的img标签并保存，开启一个定时器来遍历保存的img标签，接下来判断每个img是否出现在可视区，当某个img出现在了可视区域，就将真实地址赋值给该img的src并将该img从数组中删除以避免重复判断。
    • 判断元素是否出现在了可视区
    • 实现流程：
      1.网页滚动事件触发
      2.执行加载图片操作
      3.判断图片是否在可视区且是否已经加载过
      4.在可视区且未被加载过则动态地将data-src的值赋给该图片的src属性。

题目5： 实现视频中的图片懒加载效果

实现:http://js.jirengu.com/jebafozuwa/1/edit